<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DarkModeContainer from '@/components/common/dark-mode-container.vue';
import { useThemeStore } from '@/store/modules/theme';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { ElMessage } from 'element-plus';

defineOptions({ name: 'ClientFooter' });

const themeStore = useThemeStore();
const currentYear = new Date().getFullYear();

// 励志语录数据
interface Quote {
  text: string;
  author: string;
}

const quotes: Quote[] = [
  { text: '星星之火，可以燎原。', author: '《毛泽东选集》' },
  { text: '枪杆子里面出政权。', author: '《毛泽东选集》' },
  { text: '一切反动派都是纸老虎。', author: '《毛泽东选集》' },
  { text: '没有调查就没有发言权。', author: '《毛泽东选集》' },
  { text: '为人民服务。', author: '《毛泽东选集》' },
  { text: '下定决心，不怕牺牲，排除万难，去争取胜利。', author: '《毛泽东选集》' },
  { text: '群众是真正的英雄，而我们自己则往往是幼稚可笑的。', author: '《毛泽东选集》' },
  { text: '政治是不流血的战争，战争是流血的政治。', author: '《毛泽东选集》' },
  { text: '凡是敌人反对的，我们就要拥护；凡是敌人拥护的，我们就要反对。', author: '《毛泽东选集》' },
  { text: '夺取全国胜利，这只是万里长征走完了第一步。', author: '《毛泽东选集》' },
  { text: '前途是光明的，道路是曲折的。', author: '《毛泽东选集》' },
  { text: '战略上要藐视敌人，战术上要重视敌人。', author: '《毛泽东选集》' },
  { text: '革命不是请客吃饭。', author: '《毛泽东选集》' },
  { text: '帝国主义和一切反动派都是纸老虎。', author: '《毛泽东选集》' },
  { text: '团结一切可以团结的力量。', author: '《毛泽东选集》' },
  { text: '从群众中来，到群众中去。', author: '《毛泽东选集》' },
  { text: '读书是学习，使用也是学习，而且是更重要的学习。', author: '《毛泽东选集》' },
  { text: '世界是你们的，也是我们的，但是归根结底是你们的。', author: '《毛泽东选集》' },
  { text: '贪污和浪费是极大的犯罪。', author: '《毛泽东选集》' },
  { text: '我们要承认困难，分析困难，向困难作斗争。', author: '《毛泽东选集》' },
  { text: '敌进我退，敌驻我扰，敌疲我打，敌退我追。', author: '《毛泽东选集》' },
  { text: '虚心使人进步，骄傲使人落后。', author: '《毛泽东选集》' },
  { text: '我们不但善于破坏一个旧世界，我们还将善于建设一个新世界。', author: '《毛泽东选集》' },
  { text: '中国的革命是伟大的，但革命以后的路程更长，工作更伟大，更艰苦。', author: '《毛泽东选集》' },
  { text: '一个人做点好事并不难，难的是一辈子做好事。', author: '《毛泽东选集》' }
];

const currentQuote = ref<Quote>(quotes[0]);
const showAuthor = ref(false);

// 随机获取一条语录
function getRandomQuote() {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  currentQuote.value = quotes[randomIndex];
}

// 复制语录
function copyQuote() {
  const quoteText = `${currentQuote.value.text} —— ${currentQuote.value.author}`;
  navigator.clipboard.writeText(quoteText).then(() => {
    ElMessage.success('已复制到剪贴板');
  }).catch(() => {
    ElMessage.error('复制失败');
  });
}

// 组件挂载时获取随机语录
onMounted(() => {
  getRandomQuote();
});
</script>

<template>
  <DarkModeContainer class="h-full flex-center">
    <div 
      class="relative flex-center w-full cursor-pointer group"
      @click="copyQuote"
      @mouseenter="showAuthor = true"
      @mouseleave="showAuthor = false"
    >
      <!-- 励志语录文本 - 使用nowrap防止换行 -->
      <span 
        class="text-14px text-center transition-all max-w-lg px-8 whitespace-nowrap overflow-hidden text-ellipsis"
        :class="themeStore.footer.fixed ? 'dark:text-white' : 'text-[#6a6a6a] dark:text-white'"
      >
        {{ currentQuote.text }}
      </span>
  
        <span 
  :class="showAuthor ? 'opacity-100' : 'opacity-0'"
  class="inline-flex rounded p-1 transition-colors duration-200 hover:bg-gray-100/50 dark:hover:bg-gray-800/50"
  @click.stop="getRandomQuote"
>
  <SvgIcon 
    icon="mdi:refresh" 
    class="text-16px text-gray-500 dark:text-gray-400" 
  />
</span>
  
    </div>
  </DarkModeContainer>
</template>

<style scoped>
/* 修复后台管理端底部位置 - 使底部内容相对于整个页面宽度居中，而不受左侧菜单影响 */
:deep(.el-footer) {
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 !important;
}
</style> 